<style>
.sh-styleline {
  display: inline-block;
}
</style>
<template>
  <div v-if="!setting.drawtype||target&&setting.drawtype.includes(target.type)">
    <el-tag>{{name}}</el-tag>
    <!-- <el-tag>{{showvalue}}</el-tag> -->
    <el-row>
      <el-col :span="2">
        <el-color-picker
          :show-alpha="true"
          class="sh-styleline"
          v-if="type=='color'"
          v-model="value"
          @change="handleChange"
        ></el-color-picker>
      </el-col>
      <el-col :span="22">
        <el-input
          class="sh-styleline"
          :type="typeof value"
          :min="setting.min"
          :max="setting.max"
          :step="setting.step"
          v-if="typeof value!='boolean'"
          v-model="value"
          @input="handleChange"
        ></el-input>
        <el-switch
          v-if="typeof value=='boolean'"
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleChange"
        ></el-switch>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "cstyle",
  props: {
    target: {
      type: Object,
      default: null
    },
    type: {
      type: String,
      default: ""
    },
    name: {
      type: String,
      default: "属性"
    },
    keyword: {
      type: String,
      default: "name"
    },
    setting: {
      type: Object,
      default: () => {
        return {
          min: {
            type: Number,
            default: -Infinity
          },
          max: {
            type: Number,
            default: Infinity
          },
          step: {
            type: Number,
            default: 1
          }
        };
      }
    },
    Informatter:{
      type:Function,
      default:function(value){
          return this.type == "number" ? parseFloat(value, 10) :value
        }
      
    },
    Outformatter:{
        type:Function,
      default: function(value){
          return this.type == "number" ? parseFloat(value, 10) :value
        }   
    }
  },
  data() {
    return {
      value: ""
    };
  },
  watch: {
    deep: true,
    target(newval, oldvalue) {},
    showvalue(newval, oldvalue) {
      this.value = this.Informatter(newval);
    }
  },
  computed: {
    showvalue() {
      if (this.target) {
        return this.target[this.keyword];
      } else {
        return "";
      }
    }
  },
  methods: {
    handleChange(value) {
     value =  this.Outformatter(value);
      if (this.target) {
        this.target.set(this.keyword, value).setCoords();
        this.$set(this.target, this.keyword, value);
        this.target.canvas.renderAll();
      }
    }
  },
  destroyed(){
    this.value=""
  }
};
</script>
